<template>
  <div class="twoHistogram">
    <!-- 抄表员 抄表量  完成量 -->
    <div id="twoHistogrammain" class="twoHistogrammain-main"></div>
  </div>
</template>

<script>
const echarts = require('echarts')
import { PersonageAlwaysCopy } from '@/api/baseManage/flMaintain/index'
export default {
  name: 'ecahrtsM',
  data() {
    return {
      echarts: '',
      waterData: [],
    }
  },
  methods: {
    //改变div的长和宽
    changeHeightWidth(i, x, y, height, width) {
      console.log('height, width', height, width)
      let twoHistogrammain = document.getElementById('twoHistogrammain')
      twoHistogrammain.style.height = height + 5 + 'px'
      twoHistogrammain.style.width = width + 50 + 'px'
      twoHistogrammain.style.marginLeft = -55 + 'px'
      this.echarts = this.$echarts.init(twoHistogrammain)
      this.echarts.resize()
    },
    createEcharts() {
      // 基于准备好的dom，初始化echarts实例
      this.echarts = echarts.init(document.getElementById('twoHistogrammain'))
      var option = {
        tooltip: {
          trigger: 'axis',
          // formatter: function (params) {
          //     for (let i = 0; i < params.length; i++) {
          //         let a = params[2].value;
          //         params[2].value = a + '%'

          //     }
          //     // console.log(params,156);
          //     // var color = params.color;//图例颜色
          //     // var htmlStr ='<div>';
          //     // htmlStr += '%';

          //     // return params;
          // }
          // axisPointer: {
          //     type: 'cross',
          //     crossStyle: {
          //         color: '#999'
          //     }
          // }
        },
        toolbox: {
          feature: {
            // dataView: {show: true, readOnly: false},
            // magicType: {show: true, type: ['line', 'bar']},
            // restore: {show: true},
            // saveAsImage: {show: true}
          },
        },
        legend: {
          data: ['任务量', '完成量', '完成率'],
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月',
            ],
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '任务量',
            // min: 0,
            // max: 250,
            // interval: 50,
            splitLine: {
              show: false,
            },
            scale: true,
            axisLabel: {
              formatter: '{value}',
            },
          },
          {
            type: 'value',
            name: '百分比',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} °C',
            },
          },
        ],
        series: [
          {
            name: '任务量',
            type: 'bar',
            data: [],
          },
          {
            name: '完成量',
            type: 'bar',
            data: [],
          },
          {
            name: '完成率',
            type: 'line',
            yAxisIndex: 1,
            data: [],
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      this.echarts.setOption(option)
      window.addEventListener('resize', () => {
        this.echarts.resize()
      })
    },
    // 获取柱状图水量
    async getCopyExampleData(call) {
      const res = await PersonageAlwaysCopy()
      this.TheExampleSum = res.data.a
      // console.log(res.data);
      console.log(this.waterData, 'zongshuiliang ')
      // 总量
      const TheExampleSum = res.data.a
      // 已完成
      const TheExampleDid = res.data.b
      // 百分比
      let abc = res.data.c
      for (let i = 0; i < abc.length; i++) {
        let element = abc[i]
        // element = element *100
        abc[i] = element.split('%')[0]
        // console.log(element,357);
      }
      // console.log(abc,357);
      const TheExampleBai = abc
      //???
      const TheExampleBaiName = res.data.d
      console.log(
        TheExampleSum,
        TheExampleDid,
        TheExampleBai,
        TheExampleBaiName,
        'cesssssss666'
      )
      this.echarts.setOption({})
      this.echarts.setOption({
        tooltip: {
          // trigger: 'axis',
          // axisPointer: {
          //     type: 'cross',
          //     crossStyle: {
          //         color: '#999'
          //     }
          // }
        },
        toolbox: {
          feature: {
            // dataView: {show: true, readOnly: false},
            // magicType: {show: true, type: ['line', 'bar']},
            // restore: {show: true},
            // saveAsImage: {show: true}
          },
        },
        legend: {
          data: ['任务量', '完成量', '完成率'],
        },
        xAxis: [
          {
            type: 'category',
            data: TheExampleBaiName,
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '任务量',
            splitLine: {
              show: false,
            },
            scale: true,
            axisLabel: {
              formatter: '{value} ',
            },
          },
          {
            type: 'value',
            name: '百分比',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value} %',
            },
          },
        ],
        series: [
          {
            name: '任务量',
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#0B9AC3',
              },
            },
            data: TheExampleSum,
          },
          {
            name: '完成量',
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#E69620',
              },
            },
            data: TheExampleDid,
          },
          {
            name: '完成率',
            type: 'line',
            yAxisIndex: 1,
            // itemStyle:{
            //     normal:{
            //         color:'#63869E'
            //     }
            // },
            itemStyle: {
              normal: {
                color: '#63869E', //改变折线点的颜色
                lineStyle: {
                  color: '#8cd5c2', //改变折线颜色
                },
              },
            },
            data: TheExampleBai,
          },
        ],
      })
      call && call()
    },
  },
  mounted() {
    this.createEcharts()
    this.getCopyExampleData(() => {
      let width =
        document.querySelector('.twoHistogram').parentNode.parentNode.parentNode
          .style.width
      let height =
        document.querySelector('.twoHistogram').parentNode.parentNode.parentNode
          .clientHeight
      this.changeHeightWidth(0, 0, 0, height, Number(width.split('p')[0]))
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.echarts.resize()
    })
  },
}
</script>

<style lang="scss" scoped>
.twoHistogrammain-main {
  width: 320px;
  height: 220px;
}
</style>
